<template>
	<view class="wrap">
		<u-sticky :enable="true">
		<view class="tabs w-100 bg-white">
			<view class="d-flex justify-content-between align-items-center">
				<u-tabs class="tab-box" bg-color="#ffffff" :is-scroll="false" inactive-color="#999" name="name" :list="tabs" active-color="#616161" :current="current" @change="tabChange"></u-tabs>
				<view class="filtrate mr-20 text-color-grey" :class="filterCount>0?'filtrate-ing':''" @tap="filter">筛选{{filterCount>0?'·'+filterCount:''}}<u-icon class="ml-10" :name="filterIsShow?'arrow-up-fill':'arrow-down-fill'" size="20"></u-icon></view>
			</view>
			<view v-if="filterIsShow" class="bg-white w-100 filtrate-content" @touchmove.stop = "">
				<scroll-view class="filter-scroll" scroll-y="true">
					<view class="filter-item text-color-grey">
						<view class="mb-20 font-weight-bold">发起人性别</view>
						<view class="filter-tags">
							<view v-for="(item,index) in sexTags" :key="item.id" class="tag" :class="index==sexTagCurrent?'select':''" @tap="filterTagSex(index)">{{item.name}}</view>
						</view>
					</view>
					<view class="filter-item text-color-grey">
						<view class="mb-20 font-weight-bold">发起人身份</view>
						<view class="filter-tags">
							<view class="tag" :class="identityTagCurrent==0?'select':''" @tap="filterTagIdentity('all')">全部</view>
							<view class="tag" v-for="(item,index) in initialize.identityTags" :class="index+1==identityTagCurrent?'select':''" :key="item.id" @tap="filterTagIdentity(index)">{{item.label}}</view>
						</view>
					</view>
					<view class="filter-item text-color-grey">
						<view class="mb-20 font-weight-bold">发起人目的</view>
						<view class="filter-tags">
							<view class="tag" :class="purposeTagCurrent==0?'select':''" @tap="filterTagPurpose('all')">全部</view>
							<view class="tag" v-for="(item,index) in initialize.purposeTags" :class="index+1==purposeTagCurrent?'select':''" :key="item.id" @tap="filterTagPurpose(index)">{{item.label}}</view>
						</view>
					</view>
					<view class="filter-item text-color-grey">
						<view class="mb-20 font-weight-bold">费用模式</view>
						<view class="filter-tags">
								<view class="tag" :class="feeTagCurrent==0?'select':''" @tap="filterTagFee('all')">全部</view>
							<view class="tag" v-for="(item,index) in initialize.feeTags" :class="index+1==feeTagCurrent?'select':''" :key="item.id" @tap="filterTagFee(index)">{{item.label}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="w-100 d-flex justify-content-between p-20">
					<button class="filter-clear mr-30" type="default" @tap="filterClear">清除</button>
					<button class="filter-confirm" type="primary" @tap="filterConfirm">确认</button>
				</view>
			</view>
		</view>
		</u-sticky>
		<view class="ad-swiper">
			<u-swiper :list="initialize.ads" :title="false"
			indicator-pos="bottomCenter" mode="round" :interval="3000"></u-swiper>
		</view>
		<view class="main_content">
			<view class="main_content_body p-20">
				<fuzzy-location ref="fuzzyLocation" v-if="current==3" :currentCity="currentCity" @over="locationOver" @change="changeCity"></fuzzy-location>
				<post-list type='shoot' :list="shootLists" :loadStatus="loadStatus"></post-list>
			</view>
		</view>	
		
		<!-- 遮照层 -->
		<view v-if="filterIsShow" class="popup-bg" catchtouchmove="true"></view>
		
		<!-- tabbar -->
		<q-tabbar :active="1" :count="msgCount"></q-tabbar>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import postList from '../../components/post-list/post-list.vue';
import fuzzyLocation from '../../components/location/fuzzy-location.vue';
export default {
	components: {
		postList,
		fuzzyLocation
	},
	data() {
		return {
			page: 1,
			shootLists: [],
			loadStatus: 'loading',
			tabs: [{name: '关注',value:1},{name: '推荐约拍',value:2},{name: '最新',value:3},{name: '同城',value:4}],
			current:1,
			filterIsShow:false,
			sexTags:[{name:'全部', value:0},{name:'男',value:1},{name:'女',value:2}],
			sexTagCurrent:0,
			identityTagCurrent:0,
			purposeTagCurrent:0,
			feeTagCurrent:0,
			filterCount:0,
			selectCityVal:'',
		};
	},
	computed:{
		...mapState(['initialize', 'currentCity']),
	},
	onLoad(options) {		
		if(options.share_code) {
			let share_code = options.share_code;
			uni.setStorageSync("share_code", share_code);
		}
		this.getShootList();
	},
	onReachBottom() {
		if(this.loadStatus!='nomore') {
			this.page++;
			this.loadStatus = 'loading'
			this.getShootList();
		}
	},
	onPullDownRefresh() {
		// this.getLinkList();
		// this.getHotTopic();
		// this.getClassList();
		// this.page = 1;
		// this.topicList = [];
		// this.getTopicList();
		// uni.stopPullDownRefresh();
	},
	methods: {
		tabChange(index) {
			if(index!=this.current&&this.loadStatus!='loading') {
				this.tabs.forEach((item,t_index)=>{
					this.tabs[t_index].name = this.tabs[t_index].name.substr(0,2);
				})
				if(index!=0) this.tabs[index].name = this.tabs[index].name + '约拍'
				this.current = index;
				this.shootLists = [];
				this.page = 1;
				
				if(index==3) {
					if(!this.currentCity.value) {
						this.$nextTick(()=>{
							this.$refs.fuzzyLocation.getFuzzyLocation();
						})
					}else{
						this.getShootList();
					}
				}else{
					this.getShootList();
				}
			}
		},
		async getShootList() {
			let params = {page:this.page,tab:this.tabs[this.current].value,currentCity:this.currentCity.value,selectCity:this.selectCityVal}
			if(this.filterCount>0){
				if(this.sexTagCurrent>0) {
					params.sex = this.sexTags[this.sexTagCurrent].value
				}
				if(this.identityTagCurrent>0) {
					params.identity = this.identityTags[this.identityTagCurrent-1].value
				}
				
				if(this.purposeTagCurrent>0) {
					params.purpose = this.purposeTags[this.purposeTagCurrent-1].value
				}
				
				if(this.feeTagCurrent>0) {
					params.fee = this.feeTags[this.feeTagCurrent-1].value
				}
			}
			this.loadStatus = 'loading';
			let res = await this.$api('shoot')
			this.shootLists = this.shootLists.concat(res.data.list);
			if (this.page >= res.data.total_pages || res.data.total_pages === 0) {
				this.loadStatus = 'nomore';
			} else {
				this.loadStatus = 'loadmore';
			}
		},
		filter() {
			if(this.loadStatus!='loading') {
				this.filterIsShow = !this.filterIsShow;
			}
		},
		previewImage(url, urls) {
			uni.previewImage({
				current: url, // 当前显示图片的http链接
				urls: urls // 需要预览的图片http链接列表
			});
		},
		toSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		jump(url) {
			uni.navigateTo({
				url:url
			})
		},
		filterTagSex(current) {
			this.sexTagCurrent = current;
		},
		filterTagIdentity(current) {
			if(current=='all') current=-1
			this.identityTagCurrent = current+1;
		},
		filterTagPurpose(current) {
			if(current=='all') current=-1
			this.purposeTagCurrent = current+1;
		},
		filterTagFee(current) {
			if(current=='all') current=-1
			this.feeTagCurrent = current+1;
		},
		filterClear() {
			this.sexTagCurrent = 0;
			this.identityTagCurrent = 0;
			this.purposeTagCurrent = 0;
			this.feeTagCurrent = 0;
			this.filterCount = 0;
			this.filterIsShow = false;
			if(this.loadStatus!='loading') {				
				this.shootLists = [];
				this.page = 1;
				this.loadStatus = 'loading'
				this.getShootList();
			}
		},
		filterConfirm() {
			this.filterCount = 0;
			this.filterIsShow = false;
			if(this.sexTagCurrent) this.filterCount++;
			if(this.identityTagCurrent) this.filterCount++
			if(this.purposeTagCurrent) this.filterCount++
			if(this.feeTagCurrent) this.filterCount++
			
			if(this.loadStatus!='loading') {
				this.shootLists = [];
				this.page = 1;
				this.loadStatus = 'loading'
				this.getShootList();
			}
		},
		locationOver() {
			this.shootLists = [];
			this.page = 1;
			this.getShootList();
		},
		changeCity(val) {
			if(this.selectCityVal != val) {
				this.selectCityVal = val;
				this.shootLists = [];
				this.loadStatus = 'loading';
				this.page = 1;
				this.getShootList();
			}
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
.wrap {
    font-size: 28rpx;
}
.head_wrap {
    position: relative;
    z-index: 9;
	background-color: #FFFFFF;
}
.ad-swiper {
	height: 250rpx;
	margin: 20rpx;
}
.head_banner {
    height: 200rpx;
    padding: 0 30rpx;
}
.head_banner_slogon {
    display: inline-block;
    font-size: 20rpx;
    color: #fff9ee;
    line-height: 30rpx;
    text-align: center;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 16rpx 0;
    position: relative;
}
.search_bar {
    height: 60rpx;
    background: #fff;
    border-radius: 8rpx;
    padding-left: 70rpx;
    position: relative;
}
.search_bar:before {
    content: "";
    height: 30rpx;
    width: 30rpx;
    background: url() 0 0/15px 15px no-repeat;
    position: absolute;
    left: 28rpx;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.search_bar_txt {
    height: 60rpx;
    font-size: 28rpx;
    line-height: 60rpx;
    color: #999;
}

.block-wrap {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	padding: 20rpx;
	overflow: hidden;
}
.gn-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.main_content {
	background: #f7f7f7;
	margin-top: -2rpx;
}
.tabs {
	position: relative;
	z-index: 99;
	padding: 10rpx 0;
}
.tab-box {
	width: 70%;
}
.filtrate {
	background-color: #F1F1F1;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
}
.filtrate-ing {
	background-color: rgba(238,209,70, 0.6);
}
.filtrate-content {
	position: absolute;
	z-index:99;
}
.filter-scroll {
	height: calc(100vh - 600rpx)
}
.filter-item {
	border-bottom: 2rpx solid #F5F5F5;
	padding: 30rpx 30rpx;
}
.filter-clear {
	width: 30%;
}
.filter-confirm {
	width: 70%;
}
.main_content_head {
    position: relative;
    z-index: 9;
    background: #f7f7f7;
}
.my_group {
    height: 90rpx;
    overflow: hidden;
    background: #fff;
    padding-left: 124rpx;
    border-radius: 8rpx;
    box-shadow: 0 8rpx 16rpx 0 rgb(0 0 0 / 5%);
    position: relative;
    margin: 30rpx 30rpx 0;
}
.my_group_title {
    position: absolute;
    width: 120rpx;
    color: #333;
    font-weight: 700;
    top: 50%;
    left: 30rpx;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.quan_feed_from {
    padding: 0 10rpx;
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
    font-size: 24rpx;
    border-radius: 40rpx;
    background-color: #f8f8f8;
    max-width: 200rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.quan_release_foot {
	display: flex;
	justify-content: space-around;
	padding: 0 20rpx;
    position: relative;
    font-size: 0;
    font-family: Helvetica;
}
.quan_release_foot_emoji, .quan_release_foot_goods, .quan_release_foot_photo, .quan_release_foot_video {
    position: relative;
    display: inline-block;
	padding: 10rpx 40rpx;
    color: #666;
    font-size: 28rpx;
    text-align: center;
    border-radius: 60rpx;
    background-color: #f5f5f5;
}
.popup-bg{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index:98;
	top: 0;
	bottom: 0;
	background-color: rgba(1,1,1,0.3);
}
.filter-tags {
	display: flex;
	position: relative;
	font-size: 0;
	font-family: Helvetica;
	flex-flow: wrap; 
}
.filter-tags .tag {
	width: 150rpx;
	position: relative;
	display: inline-block;
	padding: 10rpx 0;
	color: #666;
	font-size: 28rpx;
	text-align: center;
	border-radius: 10rpx;
	background-color: #F1F1F1;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
}
.filter-tags .tag.select {
	background-color: rgb(239, 210, 52);
}
</style>
